<template>
	<view class="rectificationSituationContent">
		<view class="upper">
			<CommonNavBar :title="title" :showRobot="true"></CommonNavBar>
			<view class="step">
				<view v-for="(tabs, index) in stepList" :key="index" @click="stepActive(index)">
					<view :class="{ 'active': tabs.active }">
						{{ tabs.step }}
					</view>
				</view>
			</view>
		</view>
		<view class="centre">
			<view class="li">
				<view class="title">
					<view class="left">整改信息</view>
				</view>
				<view class="box">
					<view class="text">整改完成时限：<text>{{ rectificationSituationData.rectificationTimeLimit }}</text>
					</view>
					<view class="text">处理结果：<text>限时整改</text></view>
					<view class="text">检查时间：<text>{{ rectificationSituationData.checkTime }}</text></view>
					<view class="text">
						核查人员1：
						<uni-data-select :value="rectificationSituationData.checkPersonnel1" :localdata="userList"
							:clear="false" @change="lawEnforcementOfficialsOne">
						</uni-data-select>
					</view>
					<view class="text">
						核查人员2：
						<uni-data-select :value="rectificationSituationData.checkPersonnel2" :localdata="userList"
							:clear="false" @change="lawEnforcementOfficialsTwo">
						</uni-data-select>
					</view>
					<view class="text">核查意见：
						<view class="input-container">
							<input type="text" placeholder="请输入" v-model="rectificationSituationData.checkOpinion"
								placeholder-class="placeholder-class" />
						</view>
					</view>
					<view class="text">检查结果：
						<radio-group v-model="rectificationSituationData.checkResult" @change="handleRadioChange"
							class="custom-radio-group">
							<label v-for="(selectedOptionList, index) in selectedOptionList" :key="index"
								class="labelRadio" :class="{
									'yes': (rectificationSituationData.checkResult === '1' && index === 0),
									'no': (rectificationSituationData.checkResult === '2' && index === 1)
								}">
								<radio :value="selectedOptionList.id"
									:checked="rectificationSituationData.checkResult == selectedOptionList.id" />
								{{ selectedOptionList.option }}
							</label>
						</radio-group>
					</view>

					<view class="text" v-if="rectificationSituationData.checkResult == 2">整改时限：
						<uni-datetime-picker type="date" :clear-icon="false"
							:value="rectificationSituationData.nextRectificationTimeLimit"
							@change="rectificationTimeClick" />
					</view>

					<view class="text photo"
						v-if="rectificationSituationData.rectificationImageList == undefined || rectificationSituationData.rectificationImageList.length <= 0">
						整改照片：
						<image src="@/static/img/addTwo.png" />
						<text @click="addPhoto()">编辑整改照片</text>
					</view>
					<view class="text photo" v-else>
						整改照片：
						<text @click="look()">查看</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed">
			<button class="determine" @click="determine('2')">提交</button>
			<button class="cancellation" @click="cancellation('1')">临时保存</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupContent">
				<view class="title">问题照片</view>
				<view class="box">
					<view class="image-list">
						<view v-for="(image, index) in rectificationSituationData.rectificationImageList" :key="index"
							class="image-item">
							<image :src="baseUrl + image.fileUrl" class="itemImg" />
							<image src="../../static/img/delete.png" @click="removeImage(image.id, index)"
								class="delete"></image>
						</view>
						<button @click="chooseImage" class="upload"></button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import CommonNavBar from '@/components/CommonNavBar.vue'
export default {
	components: {
		CommonNavBar
	},
	data() {
		return {
			title: '问题整改',
			lookImage: false,
			baseUrl: uni.$baseUrl,
			rectificationId: '',
			stepList: [{
				step: '问题项',
				active: false
			}, {
				step: '整改情况',
				active: true
			}],
			problem: 2,
			userList: [],
			user1: null,//监管人1
			user2: null,//监管人2
			hcyjInput: '',//核查意见
			selectedOption: '',//核查结果
			rectificationSituationData: {},
			selectedValues: [],
			selectedOptionList: [{
				id: 1,
				option: '通过',
				isChecked: false
			},
			{
				id: 2,
				option: '不通过',
				isChecked: false
			}
			],
			photoList: false,
			selectedImages: [],
			limit: 3,
		}
	},
	filters: {
		userEmptyFilter(value) {
			if (value == undefined) {
				return 0;
			} else {
				return value;
			}
		}
	},
	onLoad(options) {
		this.rectificationId = options.rectificationId
		this.loadInitData();
	},
	created() {

	},
	computed: {

	},
	mounted() {

	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		robot() {
			uni.navigateTo({
				url: '/pages/robot/robot'
			})
		},
		stepActive(index) {
			if (index === 0) {
				uni.redirectTo({
					url: '/pages/rectification/rectificationActive?rectificationId=' + this.rectificationId
				})
			}
		},
		// 新的整改时限
		rectificationTimeClick(e) {
			this.$set(this.rectificationSituationData, 'nextRectificationTimeLimit', e);
		},
		lawEnforcementOfficialsOne(value) {
			this.$set(this.rectificationSituationData, "checkPersonnel1", value)

		},
		lawEnforcementOfficialsTwo(value) {
			this.$set(this.rectificationSituationData, "checkPersonnel2", value)

		},
		async loadInitData() {
			//加载初始化数据
			const res = await uni.$api.getRectificationSituation({
				rectificationId: this.rectificationId
			});
			if (res.data.data.checkPersonnel1 != null) {
				res.data.data.checkPersonnel1 = parseInt(res.data.data.checkPersonnel1);
			}
			if (res.data.data.checkPersonnel2 != null) {
				res.data.data.checkPersonnel2 = parseInt(res.data.data.checkPersonnel2);
			}
			this.rectificationSituationData = res.data.data;

			const res2 = await uni.$api.getSupervisePersonList();
			this.userList = res2.data.data;

		},
		handleRadioChange(option) {
			this.selectedOptionList.forEach(item => {
				item.isChecked = item.option === option;
			});
			this.rectificationSituationData.checkResult = option.detail.value;
		},
		async determine(type) {
			//保存
			uni.showLoading({
				title: '正在保存，请稍候',
				mask: true
			})
			let data = {
				rectificationId: this.rectificationId, //整改ID（在获取列表接口中有）
				supervisePersonalId1: this.rectificationSituationData.checkPersonnel1, //核查人员ID1
				supervisePersonalId2: this.rectificationSituationData.checkPersonnel2, //核查人员ID2 
				verifyIdea: this.rectificationSituationData.checkOpinion,//核查意见
				verifyResult: this.rectificationSituationData.checkResult, //核查结果 1-通过；2-不通过
				temporary: type, //是否临时1-是；2-否
				rectificationTimeLimit: this.rectificationSituationData.rectificationTimeLimit, //整改时限
				nextRectificationTimeLimit: this.rectificationSituationData.nextRectificationTimeLimit //下次整改时限
			}
			const res = await uni.$api.saveRectificationInfo(data);
			console.log(res);
			uni.hideLoading()
			if (res.data.code == 0) {
				uni.showToast({
					title: '保存成功'
				})
				uni.redirectTo({
					url: '/pages/rectification/rectification'
				})
			} else {
				uni.showToast({
					title: '保存失败'
				})
			}
		},
		addPhoto() {
			//显示添加照片
			this.lookImage = false
			this.$refs.popup.open('bottom')
		},
		look() {
			//显示照片
			this.lookImage = true
			this.$refs.popup.open('bottom')
		},
		chooseImage() {
			const that = this;
			uni.chooseImage({
				count: 1, // 最多可选择的图片数量
				success: (fileRes) => {
					uni.uploadFile({
						url: '/rectification/uploadRectificationFile',
						filePath: fileRes.tempFilePaths[0],
						header: {
							'content-Type': 'multipart/form-data',
						},
						name: 'file',
						formData: {
							rectificationId: that.rectificationSituationData.id
						},
						success: (res) => {
							let result = JSON.parse(res.data);
							if (result.code == 0) {
								uni.showToast({
									title: '上传成功',
									icon: 'error'
								})
								that.rectificationSituationData.rectificationImageList.push({
									fileUrl: result.data.fileUrl,
									id: result.data.id
								})
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
							}
						},
						fail: (err) => {
							console.log(err)
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					})
				},
			});
		},
		async removeImage(id, index) {
			const that = this;
			const res = await uni.$api.deleteRectificationImage({
				id: id
			});
			if (res.data.code == 0) {
				const selectedImages = that.rectificationSituationData.rectificationImageList.slice(); // 复制已选中图片的数组
				selectedImages.splice(index, 1); // 删除指定位置的图片
				that.$set(this.rectificationSituationData, "rectificationImageList", selectedImages);
			} else {
				uni.showToast({
					title: '删除文件失败'
				})
			}
		},
	},
	watch: {

	},
}
</script>

<style lang="scss">
.rectificationSituationContent {
	background: #F9F9F9;
	height: calc(100vh - 195rpx);

	.upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;

		.title {
			background: url('../../static/img/inspectBg.png');
			background-size: cover;
			width: 100%;
			height: 115rpx;
			line-height: 115rpx;
			position: relative;
			display: flex;
			justify-content: center;

			.arrow {
				position: absolute;
				left: 33rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 100rpx;
				height: 100rpx;

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 0%;
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #fff;
					border-top: 1px solid #fff;
					transform: translate(0%, -50%) rotate(-45deg);
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 1px;
			}

			.intelligence {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0%, -50%);
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;

				image {
					width: 75rpx;
					height: 64rpx;
				}
			}
		}

		.step {
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;
			background: #F9F9F9;

			view {
				position: relative;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				&.active {
					color: #0552A9;

					&::before {
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						bottom: 0%;
						transform: translate(-50%, 0%);
						width: 100rpx;
						height: 5rpx;
						background: #0552A9;
					}

					text {
						margin: 0 0 0 10rpx;
					}
				}
			}
		}
	}

	.centre {
		margin: 195rpx 0 0 0;
		// padding: 0 17.5rpx;
		height: calc(100vh - 280rpx);
		overflow-x: hidden;

		.li {
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			margin: 0 auto 12.5rpx;

			.title {
				height: 73rpx;
				line-height: 73rpx;
				background: #E1EAF4;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-indent: 50rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #002B5B;
			}

			.box {
				padding: 25rpx 50rpx;

				.text {
					font-size: 19rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin: 0 auto 13rpx;
					height: 68rpx;
					line-height: 68rpx;
					display: flex;
					align-items: center;

					input {
						font-size: 21rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						width: 460rpx;
						text-indent: 20rpx;
					}

					.placeholder-class {
						color: #999999;
					}

					.uni-stat__select {
						width: 460rpx;

						/deep/.uni-select {
							border: none;
						}
					}

					.uni-date {
						width: 460rpx;

						/deep/.uni-date-editor--x {
							border: none;
						}
					}

					.custom-radio-group {
						display: flex;

						.labelRadio {
							display: flex;
							margin: 0 10rpx;
							align-items: center;
						}

						/deep/.uni-radio-input {
							width: 20rpx;
							height: 20rpx;
							border: 1rpx solid #979797;
						}

						.yes {

							/deep/.uni-radio-input {
								background: #07D276 !important;
								border-color: #07D276 !important;

								&::before {
									background: #07D276;
									border-radius: 50%;
									font-size: 16rpx;
								}
							}
						}

						.no {

							/deep/.uni-radio-input {
								background: #FF1F1F !important;
								border-color: #FF1F1F !important;
								position: relative;

								&::before {
									content: "";
									position: absolute;
									width: 20rpx;
									height: 4rpx;
									background-color: #fff;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: rotate(45deg) translate(-40%, 120%);
								}

								&::after {
									content: "";
									position: absolute;
									width: 20rpx;
									height: 4rpx;
									background-color: #fff;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: rotate(-45deg) translate(-25%, -200%);
								}
							}
						}
					}

					text {
						color: #666666;
					}

					image {
						width: 21rpx;
						height: 21rpx;
						margin: 0 6rpx 0 0;
					}

					&:nth-child(even) {
						background: #F9F9F9;
					}

					&.photo {

						text {
							color: #0552A9;
						}
					}
				}
			}
		}
	}

	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 92rpx;
		background: #fff;
		padding: 0 95rpx 24rpx 95rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		width: calc(100% - 190rpx);

		button {
			width: 269rpx;
			height: 55rpx;
			line-height: 55rpx;
			background: #0552A9;
			border-radius: 10rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;

			&.determine {
				color: #fff;
			}

			&.cancellation {
				background: none;
				border: 1rpx solid #979797;
				color: #979797;
			}
		}
	}

	.popupContent {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('../../static/img/popupProblemTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-indent: 45rpx;
		}

		.box {
			padding: 45rpx 30rpx;

			.image-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				.image-item {
					position: relative;
					width: 212rpx;
					height: 212rpx;
					overflow: hidden;
					border-radius: 20rpx;
					margin: 0 25rpx 25rpx 0;

					&:nth-child(3n) {
						margin: 0 0 25rpx 0;
					}

					.itemImg {
						width: 100%;
						border-radius: 20rpx;
					}

					.delete {
						position: absolute;
						top: 16rpx;
						right: 16rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}

				.upload {
					width: 212rpx;
					height: 212rpx;
					background: url('../../static/img/upload.png') no-repeat center center;
					background-size: cover;
					padding: 0;
					margin: 0;
				}
			}
		}

		.button {
			margin: 58rpx auto 0;
			padding: 0 95rpx 24rpx 95rpx;
			display: flex;

			button {
				width: 269rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;

				&.determine {
					color: #fff;
				}

				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	}
}
</style>